
<template>
<section class="todoapp">


    <TodoHeader @addTodo="addTodo" :list="list" />
    <TodoMain :list="showArr" @sub="sub" />
    <TodoFooter :list="list"  @change="change"  @clear="clearFn" />
</section>


</template>

<script>
import "./styles/base.css"
import "./styles/index.css"


import TodoHeader from "./components/TodoHeader.vue"
import TodoMain from "./components/TodoMain.vue"
import TodoFooter from "./components/TodoFooter.vue"
export default {
  components:{TodoHeader,TodoMain,TodoFooter},
  data() {
    return {
      list:JSON.parse(localStorage.getItem("todo"))||[],
      sel:'all'
    };
  },
  methods:{
    // addTodo(todoObj){
    // this.list.push(todoObj)
    // }
    //添加
    addTodo(teak){
      let id=this.list.length>0? this.list[this.list.length-1].id+1:100
      this.list.push({
        id,
        name:teak,
      isDone: false
      })
    },
    //删除
    sub(id){
      //根据id找数组的索引值，再根据索引删除成员
    const index=this.list.findIndex(obj=>obj.id===id)
    this.list.splice(index,1)
    },
    change(type){
    this.sel=type
    },
    clearFn(){
      this.list.filter(item=>item.isDone=false)
    }
    
  },
  computed:{
    showArr(){
      if(this.sel==='yes'){
     return this.list.filter(item=>item.isDone===true)
      }
     else  if(this.sel==='no'){
     return this.list.filter(item=>item.isDone===false)
      }
       else{
     return this.list
      }
    }
  },
  watch:{
    list:{
 deep:true,
    handler(){
      localStorage.setItem("todo",JSON.stringify(this.list))
    }
    }
   
  }


}
</script>